<template>
	<view >
		<block v-if="isShows">
		<view class="tops contenr">
			<image :src="dataItm.pic" mode="aspectFill" class="topsImg"></image>
		</view>
		<view class="explain">
			<view class="iten">
				<view class="topText">{{dataItm.title}}</view>
				<view class="contexText">品牌：{{dataItm.pinpai}}</view>
				<view class="contexText mating">参考价格：{{dataItm.price}}</view>
				<view class="contexText mating dis">
					<text>主打功效：</text>
					<block v-for="(item,index) in dataItm.xiaoguo" :key="index">
					<view class="list-item contenr" v-if="item.length>0">{{item}} </view>
					</block>
				</view>
			</view>
		</view>
		<view class="matching" v-if="ty!=-1">
			<view class="mat-list" >
				<view class="matTop dis dis2">匹配分析</view>
				<view class="rouders dis dis2" v-if="ty==0">
					<view class="toux" style="margin-bottom: 30upx;">
						<image :src="toux" mode="aspectFit" class="images"></image>
					</view>
					<view class="ingthsInmg" style="margin-bottom: 30upx;">
						<image src="../../../static/img/ringth.png" mode="aspectFit" class="ingthsInmgs"></image>
					</view>
					<view class="circle dis dis1 dis2 dis5">
						<circle size='70' layer-color="#DDE5EE" v-model="dataItm.score" :rate="100" :speed="100" color="#6E9DFF" :text="dataItm.score_1"
						 select='1' :stroke-width="5"></circle>
						 <text class="pipe">匹配度</text>
					</view>
					<view class="ingthsInmg ldt" style="margin-bottom: 30upx;">
						<image src="../../../static/img/lefts.png" mode="aspectFit" class="ingthsInmgs"></image>
					</view>
					<view class="toux lst" style="margin-bottom: 30upx;">
						<image :src="dataItm.pic" mode="aspectFit" class="images" ></image>
					</view>
				</view>
				<!--  -->
				<view class="suit dis " v-if="dataItm.chengfen.length>0"><view class="shehe">适合你的成分：</view><view class="chengfen"><text>{{dataItm.chengfen}}</text></view> </view>
				<view class="lsetText">{{dataItm.fenxi}}</view>
			</view>
		</view>
		<view class="matching_1" v-if="ty==-1">
			<view class="topsList dis dis2 dis3">
				<view class="lefts">适应证型</view>
				<view class="rigths contenr" @click="goCePs">
					<text>测一测自己</text>
					<image src="../../../static/stiati/jiant_1.png" mode="aspectFit" class="jiant_1"></image>
				</view>
			</view>
			<view class="itemList dis dis6">
				<block v-for="(items,indexs) in dataItm.zhengxing" :key="indexs">
				<view class="lists contenr" v-if="items.length>0">{{items}}</view>
				</block>
			</view>
		</view>
		<view class="barrage">
			<view class="topTexts dis dis2">弹幕来袭</view>
			<view class="itms">
				<l-barrage ref="lBarrage" @end="lBarrageEnd" :len ="barrage.length" :itemsList="barrage"></l-barrage>
			</view>
		</view>
	</block>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import lBarrage from '@/components/l-barrage/l-barrage.vue';
	import indexFx from '@/common/js/indexFx.js';
	export default {
		components: {
			lBarrage
		},
		data() {
			return {
				toux: uni.getStorageSync('userInfo').avatarUrl,
				currentRate1: 80,
				text1: `80%`,
				ty:0,
				barrage: [],
				dataItm:{},
				isShows:false,
				strDate:'',//开始时间
			}
		},
		methods: {
			lBarrageEnd() {
				this.$refs.lBarrage.start(this.barrage)
			},
			getData(id){
				let that =this;
				let is = false;
				this.$http._post('examination/consumerinfo.do',{id}).then(res=>{
					console.log(res)
					if(res.data.issuccess==1){
						let {data}=res.data;
						let barrage=[];
						 data.danmu= data.danmu.split('\n');
						 let len=data.danmu.length;
						 data.score_1 = `${data.score}%`;
						 for(let i=0;i<len;i++){
							 barrage.push({text: data.danmu[i],display:1})
						 }
						 if(data.zhengxing){
							 data.zhengxing = data.zhengxing.split('\n');
						 }
						  data.xiaoguo =  data.xiaoguo.split('\n');
						 that.barrage =  barrage;
						 is =true;
						 this.isShows=is;
						 that.dataItm = data;
						console.log(data)
						
					}
				})
			},
			goCePs(){
				 indexFx.basePoint(3,0);
				 // return
				uni.reLaunch({
					url:'/second/me/everyday/everyday'
				})
			}
		},
		onLoad(e) {
			this.strDate = new Date().getTime();
			console.log('this.strDate',this.strDate)
			uni.showLoading({
				title: '加载中'
			});
			console.log(e)
			this.getData(e.id);
			this.ty=e.ty
			// this.$refs.lBarrage.start(this.barrage)
		},
		onReady() {
			this.isShows=true;
			uni.hideLoading();
		},
		onHide() {
			
		},
		onUnload: function() {
			 let endDate = new Date().getTime();
			 let seconds = Math.round((endDate-this.strDate)/1000);
			 indexFx.basePoint(2,seconds)
			 console.log(`时间差${seconds}秒`);
		    console.log('页面销毁')
		  },
		
	}
</script>

<style scoped lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	.tops {
		width: 750upx;
		height: 471upx;
		background: #FFFFFF;

		.topsImg {
			width: 378upx;
			height: 378upx;
			border-radius: 16upx;
		}
	}

	.explain {
		width: 100%;
		height: 270upx;
		background-color: #fff;

		.iten {
			width: 686upx;
			height: 100%;
			margin: auto;

			.topText {
				// width: 360upx;
				height: 56upx;
				font-size: 40upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
			}

			.contexText {
				margin-top: 32upx;
				height: 40upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;

				.list-item {
					min-width: 68upx;
					min-height: 39upx;
					background: #FFF6D9;
					border-radius: 6upx;
					padding: 0 10upx;
					font-size: 24upx;
					font-family: $typeface;
					font-weight: 500;
					color: #BD9C30;
					margin-left: 10upx;
				}
			}

			.mating {
				margin-top: 10upx;
			}

		}
	}

	.matching {
		width: 100%;
		min-height: 350upx;
		background-color: #fff;
		margin-top: 16upx;

		.mat-list {
			width: 686upx;
			min-height: 350upx;
			background-color: #fff;
			margin: auto;
			padding-bottom: 32upx;

			.matTop {
				width: 100%;
				height: 101upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
			}

			.rouders {
				width: 686upx;
				height: 237upx;
				background: #F5F9FE;
				border-radius: 24upx;

				.toux {
					width: 100upx;
					height: 100upx;
					margin-left: 57upx;
					border-radius: 50%;
					margin-bottom: 25upx;

					.images {
						width: 100upx;
						height: 100upx;
						border: 4upx solid #FFFFFF;
						border-radius: 50%;
					}
				}

				.ingthsInmg {
					width: 46upx;
					height: 26upx;
					margin: 0 32upx 0 38upx;

					.ingthsInmgs {
						width: 46upx;
						height: 26upx;
					}
				}

				.circle {
					width: 140upx;
					height: 140upx;
					.pipe{
						font-size: 24upx;
						font-family: $typeface1;
						font-weight: 400;
						color: #A1A3A6;
					}
					// border: 1px solid red;
				}

				.ldt {
					margin-left: 30upx;
					margin-right: 40upx;
				}

				.lst {
					margin: 0;
					margin-right: 57upx;
				}
			}

			.suit {
				width: 100%;
				min-height: 50upx;
				font-size: 30upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-top: 30upx;
				.shehe{
					width: 220upx;
					
				}
				.chengfen{
					margin-left: 10upx;
					width: 446upx;
				}
			}

			.lsetText {
				width: 673upx;
				min-height: 120upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #666666;
				margin: auto;
				padding-bottom: 10upx;
				margin-top: 24upx;
			}

		}
		
	}
	.matching_1{
		width: 100%;
		min-height: 203upx;
		background-color: #fff;
		margin-top: 16upx;
		pos-bottom: 50upx;
		.topsList{
			width: 100%;
			height: 101upx;
			.lefts{
				width: 128upx;
				height: 45upx;
				font-size: 32upx;
				font-family: $typeface;
				font-weight: 500;
				color: #333333;
				margin-left: 32upx;
			}
			.rigths{
				width: 160upx;
				height: 45upx;
				margin-right: 40upx;
				font-size: 26upx;
				font-family:$typeface;
				font-weight: 500;
				color: #6E9DFF;
				.jiant_1{
					width: 17upx;
					height: 19upx;
					margin-left: 8upx;
				}
			}
		}
		.itemList{
			width:686upx;
			margin: auto;
			min-height: 94upx;
			margin-top: 8upx;
			padding-bottom: 24upx;
			.lists{
				min-width: 80upx;
				height: 54upx;
				background: #E9F4FF;
				border-radius: 10upx;
				padding: 0 15upx;
				font-size: 28upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #5D7790;
				margin-right: 20upx;
				margin-top: 15upx;
			}
		}
	}

	.barrage {
		width: 100%;
		height: 550upx;
		background-color: #fff;
		margin-top: 16upx;

		.topTexts {
			width: 128upx;
			height: 100upx;
			font-size: 32upx;
			font-family: $typeface;
			font-weight: 500;
			color: #333333;
			margin-left: 40upx;
		}

		.itms {
			width: 100%;
			height: 450upx;
			overflow: hidden;
		}
	}
</style>
